<template>
  <div class="container">
    <!--   就诊人管理-->
    <div class="manage_visitor" v-if="scene===0">
      <div class="title">就诊人管理</div>
      <!--  就诊卡-->
      <div class="visit_card_container">
        <div class="visit_card" v-for="item in visitorArr">
          <div class="card-header">
            <span>{{ item?.name }}&nbsp;&nbsp;{{ item?.certificatesNo }}&nbsp;&nbsp;
        {{ item?.param?.certificatesTypeString }}</span>
            <span class="showDetail" @click="goDetail(item)">查看详细<svg t="1712133919907" class="icon"
                                                                          viewBox="0 0 1024 1024"
                                                                          version="1.1"
                                                                          xmlns="http://www.w3.org/2000/svg" p-id="4377"
                                                                          width="16" height="16"><path
                d="M332.501333 183.168a42.666667 42.666667 0 0 1 57.621334-2.496l2.709333 2.496 298.666667 298.666667a42.666667 42.666667 0 0 1 2.496 57.621333l-2.496 2.709333-298.666667 298.666667a42.666667 42.666667 0 0 1-62.826667-57.621333l2.496-2.709334L600.96 512 332.501333 243.498667a42.666667 42.666667 0 0 1-2.496-57.621334l2.496-2.709333z"
                fill="#8a8a8a" p-id="4378"></path></svg></span>
          </div>
          <el-divider style="margin: 0;width: 95%"/>
          <div class="selected_info">
            <div>
              <span class="visit_type">{{ item?.isInsure === 1 ? '医保' : '自费' }}</span>
              <span>{{ item?.certificatesNo }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item?.param?.contactsCertificatesTypeString }}</span>
            </div>
          </div>
        </div>

        <div class="add_visitor" @click="addVisitor">
          <span>+ 添加就诊人</span>
        </div>
      </div>
    </div>

    <!--   添加就诊人-->
    <div class="add_visitor" v-if="scene===1">
      <div class="title">
        <svg style="cursor: pointer" t="1712153175756" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="10590" width="18" height="18" @click="back">
          <path
              d="M642.8 959.8H511L63.2 512 511 64.2h131.7L194.9 512l447.9 447.8z" fill="#2c2c2c" p-id="10591"></path>
        </svg>&nbsp;&nbsp;添加就诊人
      </div>
      <!--     就诊人信息-->
      <div class="card">
        <el-card>
          <template #header>
            <div class="card-header">
              <svg t="1712135349823" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5598" width="32" height="32">
                <path d="M450.56 128h61.44v768H450.56zM512 128h61.44v768h-61.44z" p-id="5599" fill="#4990F1"></path>
              </svg>
              <span>就诊人信息</span>
            </div>
          </template>
          <!--         中间-->
          <el-form
              style="max-width: 800px;margin: 0 auto"
          >
            <el-form-item label="姓名:" label-width="100px" style="margin: 40px 0">
              <el-input placeholder="请输入真实姓名全称" style="width: 80%" v-model="FormData.name"/>
            </el-form-item>
            <el-form-item label="证件类型:" label-width="100px" style="margin: 40px 0">
              <el-select placeholder="请选择证件类型" style="width: 80%" v-model="FormData.certificatesType">
                <el-option :label="item.name" :value="item.value" v-for="item in typeArr"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-input placeholder="请输入证件号码" style="width: 80%" v-model="FormData.certificatesNo"/>
            </el-form-item>
            <el-form-item label="性别:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-radio-group v-model="FormData.sex" class="ml-4">
                <el-radio :label="1" size="large">男</el-radio>
                <el-radio :label="0" size="large">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                  v-model="FormData.birthdate"
              />
            </el-form-item>
            <el-form-item label="手机号码:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-input placeholder="请输入手机号码" style="width: 80%" v-model="FormData.phone"/>
            </el-form-item>

          </el-form>
        </el-card>
      </div>
      <!--     建档信息-->
      <div class="card">
        <el-card>
          <template #header>
            <div class="card-header">
              <svg t="1712135349823" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5598" width="32" height="32">
                <path
                    d="M450.56 128h61.44v768H450.56zM512 128h61.44v768h-61.44z" p-id="5599" fill="#4990F1"></path>
              </svg>
              <span>建档信息(完善后部分医院首次就诊不排队建档)</span>
            </div>
          </template>
          <!--         中间-->
          <el-form
              style="max-width: 800px;margin: 0 auto"
          >
            <el-form-item label="婚姻状况:" label-width="100px" style="margin: 40px 0" prop="name">
              <el-radio-group v-model="FormData.isMarry">
                <el-radio :label="1" size="large">已婚</el-radio>
                <el-radio :label="0" size="large">未婚</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="自费/医保:" label-width="100px" style="margin: 40px 0" prop="certificatesType">
              <el-radio-group v-model="FormData.isInsure">
                <el-radio :label="1" size="large">自费</el-radio>
                <el-radio :label="0" size="large">医保</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="当前住址:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-cascader :props="props" v-model="FormData.addressSelected"/>
            </el-form-item>
            <el-form-item label="详细地址:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-input placeholder="应公安机关要求，请填写现居住地址" style="width: 80%" v-model="FormData.address"/>
            </el-form-item>


          </el-form>
        </el-card>
      </div>
      <!--     联系人信息-->
      <div class="card">
        <el-card>
          <template #header>
            <div class="card-header">
              <svg t="1712135349823" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5598" width="32" height="32">
                <path
                    d="M450.56 128h61.44v768H450.56zM512 128h61.44v768h-61.44z" p-id="5599" fill="#4990F1"></path>
              </svg>
              <span>联系人信息(选填)</span>
            </div>
          </template>
          <!--         中间-->
          <el-form
              style="max-width: 800px;margin: 0 auto"
          >
            <el-form-item label="姓名:" label-width="100px" style="margin: 40px 0" prop="name">
              <el-input placeholder="请输入真实姓名全称" style="width: 80%" v-model="FormData.contactsName"/>
            </el-form-item>
            <el-form-item label="证件类型:" label-width="100px" style="margin: 40px 0" prop="certificatesType">
              <el-select placeholder="请选择证件类型" style="width: 80%" v-model="FormData.contactsCertificatesType">
                <el-option :label="item.name" :value="item.value" v-for="item in typeArr"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-input placeholder="请输入证件号码" style="width: 80%" v-model="FormData.contactsCertificatesNo"/>
            </el-form-item>
            <el-form-item label="手机号码:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-input placeholder="请输入手机号码" style="width: 80%" v-model="FormData.contactsPhone"/>
            </el-form-item>

          </el-form>
        </el-card>
      </div>

      <div class="saveBtn">
        <el-button type="primary" style="width: 15%;height: 50%;background-color: #4490F1;font-size: 16px"
                   @click="postVisitorInfo">保存
        </el-button>
      </div>
    </div>

    <!--   就诊人信息详细-->
    <div class="visitor_info" v-if="scene===2">
      <!--     就诊人信息-->
      <div class="title">
        <svg style="cursor: pointer" t="1712153175756" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="10590" width="18" height="18" @click="back">
          <path
              d="M642.8 959.8H511L63.2 512 511 64.2h131.7L194.9 512l447.9 447.8z" fill="#2c2c2c" p-id="10591"></path>
        </svg>&nbsp;&nbsp;就诊人信息
      </div>
      <div class="card">
        <el-card>
          <template #header>
            <div class="card-header" style="display: flex;align-items: center">
              <svg t="1712135349823" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5598" width="32" height="32">
                <path d="M450.56 128h61.44v768H450.56zM512 128h61.44v768h-61.44z" p-id="5599" fill="#4990F1"></path>
              </svg>
              <span>就诊人信息</span>
            </div>
          </template>
          <!--         中间-->
          <div class="visitor_info_container">
            <div>
              <span class="title">姓名:</span>
              <span class="content">{{ selectVisitor?.name }}</span>
            </div>
            <div>
              <span class="title">证件类型:</span>
              <span class="content">{{ selectVisitor?.param.certificatesTypeString }}</span>
            </div>
            <div>
              <span class="title">证件号码:</span>
              <span class="content">{{ selectVisitor?.certificatesNo }}</span>
            </div>
            <div>
              <span class="title">性别:</span>
              <span class="content">{{ selectVisitor?.sex === 0 ? "男" : "女" }}</span>
            </div>
            <div>
              <span class="title">出生日期:</span>
              <span class="content">{{ selectVisitor?.birthdate }}</span>
            </div>
            <div>
              <span class="title">手机号码:</span>
              <span class="content">{{ selectVisitor?.contactsPhone }}</span>
            </div>
            <div>
              <span class="title">婚姻状况:</span>
              <span class="content">{{ selectVisitor?.isMarry === 0 ? "否" : "是" }}</span>
            </div>
            <div>
              <span class="title">当前住址:</span>
              <span class="content">{{ selectVisitor?.address }}</span>
            </div>
            <div>
              <span class="title">详细地址:</span>
              <span class="content">{{ selectVisitor?.param?.fullAddress }}</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="alertOrDelete">
        <el-button type="danger" style="width: 10%;height: 50%" @click="DeleteVisitor(selectVisitor.id)">删除就诊人
        </el-button>
        <el-button type="primary" style="width: 15%;height: 50%" @click="updateVisitor(selectVisitor)">修改就诊人信息
        </el-button>
      </div>
    </div>
    <!--修改就诊人信息-->
    <div class="update_visitor" v-if="scene===3">
      <div class="title">
        <svg style="cursor: pointer" t="1712153175756" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="10590" width="18" height="18" @click="back">
          <path
              d="M642.8 959.8H511L63.2 512 511 64.2h131.7L194.9 512l447.9 447.8z" fill="#2c2c2c" p-id="10591"></path>
        </svg>&nbsp;&nbsp;修改就诊人
      </div>
      <!--     就诊人信息-->
      <div class="card">
        <el-card>
          <template #header>
            <div class="card-header">
              <svg t="1712135349823" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5598" width="32" height="32">
                <path d="M450.56 128h61.44v768H450.56zM512 128h61.44v768h-61.44z" p-id="5599" fill="#4990F1"></path>
              </svg>
              <span>就诊人信息</span>
            </div>
          </template>
          <!--         中间-->
          <el-form
              style="max-width: 800px;margin: 0 auto"
          >
            <el-form-item label="姓名:" label-width="100px" style="margin: 40px 0">
              <el-input placeholder="请输入真实姓名全称" style="width: 80%" v-model="UpdateData.name"/>
            </el-form-item>
            <el-form-item label="证件类型:" label-width="100px" style="margin: 40px 0">
              <el-select placeholder="请选择证件类型" style="width: 80%" v-model="UpdateData.certificatesType">
                <el-option :label="item.name" :value="item.value" v-for="item in typeArr"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-input placeholder="请输入证件号码" style="width: 80%" v-model="UpdateData.certificatesNo"/>
            </el-form-item>
            <el-form-item label="性别:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-radio-group v-model="UpdateData.sex" class="ml-4">
                <el-radio :label="1" size="large">男</el-radio>
                <el-radio :label="0" size="large">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                  v-model="UpdateData.birthdate"
              />
            </el-form-item>
            <el-form-item label="手机号码:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-input placeholder="请输入手机号码" style="width: 80%" v-model="UpdateData.phone"/>
            </el-form-item>

          </el-form>
        </el-card>
      </div>
      <!--     建档信息-->
      <div class="card">
        <el-card>
          <template #header>
            <div class="card-header">
              <svg t="1712135349823" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5598" width="32" height="32">
                <path
                    d="M450.56 128h61.44v768H450.56zM512 128h61.44v768h-61.44z" p-id="5599" fill="#4990F1"></path>
              </svg>
              <span>建档信息(完善后部分医院首次就诊不排队建档)</span>
            </div>
          </template>
          <!--         中间-->
          <el-form
              style="max-width: 800px;margin: 0 auto"
          >
            <el-form-item label="婚姻状况:" label-width="100px" style="margin: 40px 0" prop="name">
              <el-radio-group v-model="UpdateData.isMarry">
                <el-radio :label="1" size="large">已婚</el-radio>
                <el-radio :label="0" size="large">未婚</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="自费/医保:" label-width="100px" style="margin: 40px 0" prop="certificatesType">
              <el-radio-group v-model="UpdateData.isInsure">
                <el-radio :label="1" size="large">自费</el-radio>
                <el-radio :label="0" size="large">医保</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="当前住址:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-cascader :props="props" v-model="UpdateData.addressSelected"/>
            </el-form-item>
            <el-form-item label="详细地址:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-input placeholder="应公安机关要求，请填写现居住地址" style="width: 80%" v-model="UpdateData.address"/>
            </el-form-item>


          </el-form>
        </el-card>
      </div>
      <!--     联系人信息-->
      <div class="card">
        <el-card>
          <template #header>
            <div class="card-header">
              <svg t="1712135349823" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5598" width="32" height="32">
                <path
                    d="M450.56 128h61.44v768H450.56zM512 128h61.44v768h-61.44z" p-id="5599" fill="#4990F1"></path>
              </svg>
              <span>联系人信息(选填)</span>
            </div>
          </template>
          <!--         中间-->
          <el-form
              style="max-width: 800px;margin: 0 auto"
          >
            <el-form-item label="姓名:" label-width="100px" style="margin: 40px 0" prop="name">
              <el-input placeholder="请输入真实姓名全称" style="width: 80%" v-model="UpdateData.contactsName"/>
            </el-form-item>
            <el-form-item label="证件类型:" label-width="100px" style="margin: 40px 0" prop="certificatesType">
              <el-select placeholder="请选择证件类型" style="width: 80%" v-model="UpdateData.contactsCertificatesType">
                <el-option :label="item.name" :value="item.value" v-for="item in typeArr"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-input placeholder="请输入证件号码" style="width: 80%" v-model="UpdateData.contactsCertificatesNo"/>
            </el-form-item>
            <el-form-item label="手机号码:" label-width="100px" style="margin: 40px 0" prop="certificatesNo">
              <el-input placeholder="请输入手机号码" style="width: 80%" v-model="UpdateData.contactsPhone"/>
            </el-form-item>

          </el-form>
        </el-card>
      </div>

      <div class="saveBtn">
        <el-button type="primary" style="width: 15%;height: 50%;background-color: #4490F1;font-size: 16px"
                   @click="putupdateVisitor">修改
        </el-button>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import {reqDocumentType, reqLocation, reqAddVisitor, reqDeleteVisitor, reqUpdateVisitor} from "@/api/user";
import {onMounted, reactive, ref} from "vue";
import type {CascaderProps} from 'element-plus'
import {reqVisitorList} from "@/api/hospital";
import {ElMessage} from "element-plus";


// 0---就诊人管理，1---新增就诊人，2---就诊人详细
const scene = ref<number>(0)

// 选中的就诊人
const selectVisitor = ref()
// 居住地址懒加载
let id = 0
const props: CascaderProps = {
  lazy: true,
  async lazyLoad(node, resolve) {
    let res = await reqLocation(node.data.id || '86')
    // 将服务器返回的数据进行加工成符合的格式
    let showData = res.data.map((item) => {
      return {
        id: item.id,
        value: item.value,
        label: item.name,
        leaf: !item.hasChildren,
      }
    })
    // 注入处理数据
    resolve(showData)

  },
}

const handleChange = (value) => {
  console.log(value)
}
// 证件类型
const typeArr = ref()
// 就诊人列表
const visitorArr = ref()
// 就诊人信息的表单
let FormData = reactive({
  address: "",
  addressSelected: [],
  birthdate: "",
  certificatesNo: "",
  certificatesType: "",
  contactsCertificatesNo: "",
  contactsCertificatesType: "",
  contactsName: "",
  contactsPhone: "",
  isInsure: 0,
  isMarry: 0,
  name: "",
  param: {},
  phone: "",
  sex: 0,
  provinceCode: '',
  districtCode: "",
  cityCode: ''

})
// 更新就诊人信息的表单
let UpdateData = reactive({
  address: "",
  addressSelected: [],
  birthdate: "",
  certificatesNo: "",
  certificatesType: "",
  contactsCertificatesNo: "",
  contactsCertificatesType: "",
  contactsName: "",
  contactsPhone: "",
  isInsure: 0,
  isMarry: 0,
  name: "",
  param: {},
  phone: "",
  sex: 0,
  provinceCode: '',
  districtCode: "",
  cityCode: ''

})
onMounted(() => {
  getDocumentType()
  getVisitorList()
})
// 获取证件类型的请求
const getDocumentType = async () => {
  let res = await reqDocumentType()
  typeArr.value = res.data
}
// 获取就诊人列表的请求
const getVisitorList = async () => {
  let res = await reqVisitorList()
  visitorArr.value = res.data
}


// 新增就诊人的请求
const postVisitorInfo = async () => {
  FormData.provinceCode = FormData.addressSelected[0] || ""
  FormData.districtCode = FormData.addressSelected[1] || ""
  FormData.cityCode = FormData.addressSelected[2] || ""
  let res = await reqAddVisitor(FormData)
  if (res.code === 200) {
    ElMessage({
      type: 'success',
      message: '新增就诊人成功！'
    })
    // 重新获取就诊人列表
    getVisitorList()
    scene.value = 0
    window.scrollTo(0, 0)
  } else {
    ElMessage({
      type: 'error',
      message: '新增就诊人失败！'
    })
  }


}

// 删除就诊人的请求
const DeleteVisitor = async (id: string) => {
  let res = await reqDeleteVisitor(id)
  if (res.code === 200) {
    ElMessage({
      type: 'success',
      message: '删除成功！'
    })
    scene.value = 0
    // 重新获取就诊人列表
    getVisitorList()
  } else {
    ElMessage({
      type: 'error',
      message: '删除失败！'
    })
  }
}

//修改就诊人
const updateVisitor = (item) => {
  scene.value = 3
  UpdateData = item
  UpdateData.addressSelected = [UpdateData.provinceCode, UpdateData.districtCode, UpdateData.cityCode]
}
// 修改就诊人的请求
const putupdateVisitor = async () => {

  let res = await reqUpdateVisitor(UpdateData)
 if(res.code===200){
   ElMessage({
     type:'success',
     message:'修改成功！'
   })
   // 重新获取就诊人列表
   getVisitorList()
   scene.value=0
 }
 else {
   ElMessage({
     type:'error',
     message:'修改失败！'
   })
 }
}
// 添加就诊人
const addVisitor = () => {
  scene.value = 1
}

// 就诊人详细
const goDetail = (item) => {
  scene.value = 2
  selectVisitor.value = item
}

// 返回
const back = () => {
  scene.value = 0
}


</script>

<style scoped lang="scss">

.title {
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
  padding: 0;
  box-sizing: border-box;
  letter-spacing: 1px;
  font-weight: 700;
  color: #333;
  font-size: 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;

}

.manage_visitor {
  .visit_card_container {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    .visit_card {
      &:hover {
        transition: all .5s;
        transform: scale(1.02);
      }

      margin: 20px 0;
      cursor: pointer;
      width: 80%;
      height: 150px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;

      .card-header {
        width: 100%;
        height: 40%;
        display: flex;
        align-items: center;
        font-size: 16px;
        padding: 0 30px;
        justify-content: space-between;

        span {
          color: grey;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .showDetail:hover {
          color: #4990F1;
        }
      }

      .selected_info {
        width: 100%;
        height: 60%;
        display: flex;
        align-items: center;
        padding-left: 20px;

        div {
          width: 50%;
          height: 60%;
          background-color: #4990F1;
          display: flex;
          align-items: center;
          padding-left: 20px;
          border-radius: 5px;

          span {
            color: white;
            font-size: 14px;
            margin-left: 20px;

            &.visit_type {
              margin: 0px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #89C4ED;
              width: 40px;
              border-radius: 5px;
              height: 20px;
              background-color: #FFFFFF;
            }
          }
        }
      }

    }

    .add_visitor {
      width: 80%;
      height: 80px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin-top: 10px;

      span {
        font-size: 17px;
        color: #4990F1;
      }

      &:hover {
        transition: all .5s;
        transform: scale(1.02);
      }
    }
  }
}

.add_visitor {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  .card-header {
    display: flex;
    align-items: center;
  }

  .card {
    margin-bottom: 30px;
    width: 80%;
  }

  .saveBtn {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

}

.visitor_info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  .visitor_info_container {
    width: 100%;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 20px 50px;

    div {
      width: 100%;
      height: 50px;
      display: flex;

      .title {
        width: 40%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-font-smoothing: antialiased;
        -webkit-tap-highlight-color: transparent;
        font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
        text-align: right;
        vertical-align: middle;
        font-size: 15px;
        line-height: 40px;
        padding: 0 0 0 0;
        box-sizing: border-box;
        color: #b2aeae !important;
        letter-spacing: 1px;

      }

      .content {
        width: 60%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        -webkit-font-smoothing: antialiased;
        -webkit-tap-highlight-color: transparent;
        line-height: 40px;
        font-size: 14px;
        color: #333;
        font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    }
  }

  .alertOrDelete {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.update_visitor {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  .card-header {
    display: flex;
    align-items: center;
  }

  .card {
    margin-bottom: 30px;
    width: 80%;
  }

  .saveBtn {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

}
</style>